<template>
  <div>
    <a-card hoverable class="my-info">
      <img
        slot="cover"
        src="@/assets/bac2.jpg"
        class="myback"
      >
      <img :src="admin.header" class="header-c">
      <div class="my-bottom-c">
        <div class="nickname">
          {{ admin.name }}
        </div>
        <div class="signature">
          <a-tooltip placement="left">
            <template slot="title">
              {{ admin.signature }}
            </template>
            {{ admin.signature }}
          </a-tooltip>
        </div>
        <a-divider type="horizontal" />
        <div class="meta-social-container">
          <div class="meta-social-item">
            <router-link to="/time-line">
              <div class="meta-item">
                <countTo :start-val="0" :end-val="blogSum" :duration="2000" />
                <span>日志</span>
              </div>
            </router-link>
            <a-divider type="vertical" />
            <router-link to="/type">
              <div class="meta-item">
                <countTo :start-val="0" :end-val="typeList.length" :duration="2000" />
                <span>分类</span>
              </div>
            </router-link>
            <a-divider type="vertical" />
            <router-link to="/about">
              <div class="meta-item">
                <countTo :start-val="0" :end-val="1" :duration="2000" />
                <span>关于</span>
              </div>
            </router-link>
            <a-divider type="vertical" />
            <router-link to="/type">
              <div class="meta-item">
                <countTo :start-val="0" :end-val="tagList.length" :duration="2000" />
                <span>标签</span>
              </div>
            </router-link>
          </div>
        </div>
        <a-divider type="horizontal" />
        <div class="social-container">
          <div class="social-item">
            <a href="https://gitee.com/iskka" target="_blank">
              <a-icon type="github" class="social-icon" />
            </a>
            <a href="http://wpa.qq.com/msgrd?v=3&uin=2100370548&site=qq&menu=yes" target="_blank">
              <a-icon type="qq" class="social-icon" />
            </a>
            <a href="">
              <a-icon type="weibo" class="social-icon" />
            </a>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import adminApi from '@/api/admin'
import countTo from 'vue-count-to'
import blogApi from '@/api/blog'
import typeApi from '@/api/type'
import tagApi from '../../api/tag'
export default {
  name: 'MyInfo',
  components: {
    countTo
  },
  data() {
    return {
      admin: {},
      typeList: [],
      blogSum: 0,
      tagList: []
    }
  },
  created() {
    this.getAdmin()
    this.getTypeList()
    this.getBlogSum()
    this.getEnabledTags()
  },
  methods: {
    getAdmin() {
      adminApi.getAdmin().then(res => {
        if (res.code === 200) {
          this.admin = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getEnabledTags() {
      tagApi.getEnabledTags().then(res => {
        if (res.code === 200) {
          this.tagList = res.data
        }
      })
    },
    getTypeList() {
      typeApi.getList().then(res => {
        if (res.code === 200) {
          this.typeList = res.data
        }
      })
    },
    getBlogSum() {
      blogApi.getSum().then(res => {
        if (res.code === 200) {
          this.blogSum = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-card-bordered{
    border-bottom: none !important;
  }
  .my-info{
    width: 100%;
    position: relative;
    .myback{
      position: absolute;
      background-blend-mode: color;
    }
    .header-c{
      display: block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid #d6d6d6;
      position: relative;
      margin: 53px auto 10px;
      box-shadow: 1px 0 10px #d6d6d6;
    }
    .my-bottom-c{
      margin-top: 10px;
      .nickname{
        text-align: center;
        font-weight: bold;
        font-size: 22px;
      }
      .signature{
        width: 100%;
        overflow: hidden;
        margin-top: 15px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 15px;
        color: #878d99;
      }
      .meta-social-container{
        display: flex;
        justify-content: space-around;
        flex-flow: row nowrap;
        padding: 0 15px;
        .meta-social-item{
          display: flex;
          flex-flow: row nowrap;
          .ant-divider{
            height: 70% !important;
            margin: auto 0;
          }
          .meta-item{
            width: 50px;
            height: 60px;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-around;
            color: #bebebe;
            font-size: 15px;
            align-items: center;
          }
        }
      }
      .social-container{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        .social-item{
          width: 188px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;
          .social-icon{
            font-size: 40px;
            color: #5396E4;
          }
        }
      }
    }
  }
</style>
